<template>
	<view class="page-container box-sizing-b w-full">
		<!-- 头部组件 -->
		<!-- <use-header icon=""></use-header> -->
		<view class="dflex padding-left padding-right-xs w-full bg-drak padding-tb-sm">
			<!-- 搜索 -->
			<view class="use-hover use-search dflex-c border-radius-lg padding-lr w-full" @click="toSearch">
				<view class="iconfont iconsousuo margin-right-sm"></view>
				<text>搜索</text>
			</view>

			<!-- <view class="use-hover dflex-c" @click="toEngineer">
				<image class="margin-lr-sm" src="../../static/images/pg-02.png" style="width: 60rpx;height: 60rpx;">
				</image>
			</view> -->
			<!-- <view class="use-hover iconfont icongengduo padding-right" @click="toMore"></view> -->
		</view>
		<!-- <view class="use-placeholder"></view> -->

		<view class="padding-top-sm padding-lr margin-bottom">
			<view class="use-hover dflex-b im-chat-item" @click="toChat">
				<view class="istop">
					<view class="iconfont iconzhiding"></view>
				</view>
				<view class="dflex">
					<image class="headimg margin-right" src="../../static/images/headimg/face_12.jpg"></image>
					<view>
						<view class="pos-r dflex">
							<view class="fwb fs margin-right">花木兰</view>
						</view>
						<text>还有一个BUG需要处理</text>
					</view>
				</view>
				<view class="dflex-e dflex-flow-c">
					<text>18:00</text>
					<view class="badge badge-none">2</view>
				</view>
			</view>
			<view class="use-hover dflex-b im-chat-item" @click="toChat">
				<view class="istop">
					<view class="iconfont iconzhiding"></view>
				</view>
				<view class="dflex">
					<image class="headimg margin-right" src="../../static/images/headimg/face_6.jpg"></image>
					<view>
						<view class="pos-r dflex">
							<view class="fwb fs margin-right">李元芳</view>
						</view>
						<text>还有一个BUG需要处理</text>
					</view>
				</view>
				<view class="dflex-e dflex-flow-c">
					<text>09:00</text>
					<view class="badge badge-none">99+</view>
				</view>
			</view>
			<view class="use-hover dflex-b im-chat-item" @click="toChat">
				<view class="dflex">
					<image class="headimg margin-right" src="../../static/images/headimg/face_2.jpg"></image>
					<view>
						<view class="pos-r dflex">
							<view class="fwb fs margin-right">IOT</view>
						</view>
						<text>IOT数据接收中心</text>
					</view>
				</view>
				<view class="dflex-e dflex-flow-c">
					<text>08:00</text>
					<view class="badge badge-none">2</view>
				</view>
			</view>
			<view class="dflex-b im-chat-item" @click="toChat">
				<view class="dflex">
					<image class="headimg margin-right" src="../../static/images/headimg/face_4.jpg"></image>
					<view>
						<view class="pos-r dflex">
							<view class="fwb fs margin-right">马可波罗</view>
						</view>
						<text>还有一个BUG需要处理</text>
					</view>
				</view>
				<view class="dflex-e dflex-flow-c">
					<text>06/01</text>
					<view class="badge badge-none">12</view>
				</view>
			</view>
			<view class="dflex-b im-chat-item" @click="toChat">
				<view class="dflex">
					<image class="headimg margin-right" src="../../static/images/headimg/face_12.jpg"></image>
					<view>
						<view class="pos-r dflex">
							<view class="fwb fs margin-right">花木兰</view>
						</view>
						<text>还有一个BUG需要处理</text>
					</view>
				</view>
				<view class="dflex-e dflex-flow-c" @click="toChat">
					<text>05/01</text>
					<view class="badge badge-none">2</view>
				</view>
			</view>
			<view class="dflex-b im-chat-item" @click="toChat">
				<view class="dflex">
					<image class="headimg margin-right" src="../../static/images/headimg/face_6.jpg"></image>
					<view>
						<view class="pos-r dflex">
							<view class="fwb fs margin-right">李元芳</view>
						</view>
						<text>还有一个BUG需要处理</text>
					</view>
				</view>
				<view class="dflex-e dflex-flow-c">
					<text>04/01</text>
					<view class="badge badge-none">99+</view>
				</view>
			</view>
			<view class="dflex-b im-chat-item" @click="toChat">
				<view class="dflex">
					<image class="headimg margin-right" src="../../static/images/headimg/face_2.jpg"></image>
					<view>
						<view class="pos-r dflex">
							<view class="fwb fs margin-right">李白</view>
						</view>
						<text>还有一个BUG需要处理</text>
					</view>
				</view>
				<view class="dflex-e dflex-flow-c">
					<text>03/01</text>
					<view class="badge badge-none">99+</view>
				</view>
			</view>
			<view class="dflex-b im-chat-item" @click="toChat">
				<view class="dflex">
					<image class="headimg margin-right" src="../../static/images/headimg/face_4.jpg"></image>
					<view>
						<view class="pos-r dflex">
							<view class="fwb fs margin-right">马可波罗</view>
						</view>
						<text>还有一个BUG需要处理</text>
					</view>
				</view>
				<view class="dflex-e dflex-flow-c">
					<text>02/01</text>
					<view class="badge badge-none">9</view>
				</view>
			</view>
			<view class="dflex-b im-chat-item" @click="toChat">
				<view class="dflex">
					<image class="headimg margin-right" src="../../static/images/headimg/face_12.jpg"></image>
					<view>
						<view class="pos-r dflex">
							<view class="fwb fs margin-right">花木兰</view>
						</view>
						<text>还有一个BUG需要处理</text>
					</view>
				</view>
				<view class="dflex-e dflex-flow-c">
					<text>20/06/01</text>
					<view class="badge badge-none">2</view>
				</view>
			</view>
			<view class="dflex-b im-chat-item" @click="toChat">
				<view class="dflex">
					<image class="headimg margin-right" src="../../static/images/headimg/face_6.jpg"></image>
					<view>
						<view class="pos-r dflex">
							<view class="fwb fs margin-right">李元芳</view>
						</view>
						<text>还有一个BUG需要处理</text>
					</view>
				</view>
				<view class="dflex-e dflex-flow-c">
					<text>20/04/01</text>
					<view class="badge badge-none">99+</view>
				</view>
			</view>
			<view class="dflex-b im-chat-item" @click="toChat">
				<view class="dflex">
					<image class="headimg margin-right" src="../../static/images/headimg/face_2.jpg"></image>
					<view>
						<view class="pos-r dflex">
							<view class="fwb fs margin-right">李白</view>
						</view>
						<text>还有一个BUG需要处理</text>
					</view>
				</view>
				<view class="dflex-e dflex-flow-c">
					<text>20/02/01</text>
					<view class="badge badge-none">99+</view>
				</view>
			</view>
			<view class="dflex-b im-chat-item" @click="toChat">
				<view class="dflex">
					<image class="headimg margin-right" src="../../static/images/headimg/face_4.jpg"></image>
					<view>
						<view class="pos-r dflex">
							<view class="fwb fs margin-right">马可波罗</view>
						</view>
						<text>还有一个BUG需要处理</text>
					</view>
				</view>
				<view class="dflex-e dflex-flow-c">
					<text>20/01/01</text>
					<view class="badge badge-none">99+</view>
				</view>
			</view>
		</view>

		<view class="use-placeholder"></view>
		<!-- 置顶 -->
		<use-totop :style="{ marginBottom: navHeight + 'px' }" :scroll-top="scrollTop"></use-totop>
	</view>
</template>

<script>
	import {
		mapState
	} from 'vuex';

	export default {
		computed: {
			...mapState(['member'])
		},
		data() {
			return {
				__env: {},

				// moreShow: false,

				// 头部参数
				searchAuto: !0,
				searchTip: '请输入搜索关键字',

				scrollTop: 0,
				navHeight: 0,
				navUserHeight: 70,
				statusBarHeight: '20px'
			};
		},
		// 监听页面加载
		onLoad() {
			// this.$api.get_env((res) => {
			// 	this.__env = res;
			// 	console.log('home env', this.__env);
			// 	this.is_mp = this.__env.is_mp;
			// 	this.platform = this.__env.platform;
			// 	this.platform_icon = this.__env.platform_icon;
			// 	this.platform_name = this.__env.platform_name;
			// 	this.statusBarHeight = this.__env.statusBarHeight + 'px';
			// });

			if (uni.canIUse('showTabBarRedDot')) {
				// uni.showTabBarRedDot({
				// 	index: 3,
				// 	success(res) {
				// 		console.log(res);
				// 	}
				// });
			}

			uni.$on('__on_im_receive_msg', res => {
				console.log('__on_im_receive_msg list', res);

				uni.$emit('__on_im_send_msg', '已接收 msg: ' + res);
			});
		},
		onUnload() {
			// uni.$off('__on_im_receive_msg', fn);
		},
		onPageScroll(e) {
			this.scrollTop = e.scrollTop
		},
		// 监听页面显示。页面每次出现在屏幕上都触发，包括从下级页面点返回露出当前页面
		onShow() {
			// this.loadData();
		},
		// 监听用户下拉刷新
		// onPullDownRefresh() {
		// 	return;
		// 	this.loadData(() => {
		// 		uni.stopPullDownRefresh();
		// 	});
		// },
		// 用户点击右上角分享
		// https://uniapp.dcloud.io/api/plugins/share?id=showsharemenu
		onShareAppMessage: function(ops) {
			let _this = this,
				mid = 0;

			if (_this.member && _this.member.id) {
				mid = _this.member.id;
			}

			return {
				title: '用云 · IM',
				path: `/pages/chat/home?mid=${mid}`,
				// imageUrl: 'https://mall-os-api.use-cloud.com/files/upload/image/20200408/200408115587860242.jpg',
				success: function(res) {
					// 转发成功
					console.log('转发成功', res);
				},
				fail: function(res) {
					// 转发失败
					console.log('转发失败', res);
				}
			};
		},

		methods: {
			// 加载数据
			async loadData(callback) {

			},

			toScan() {
				uni.scanCode({
					success(res) {
						console.log(res);

						uni.showModal({
							content: res.result
						})
					}
				})
			},

			toChat(form) {
				uni.navigateTo({
					url: `/pages/news/chat`
				});
			},

			// 搜索
			toSearch(options) {
				console.log('home search', options);

				uni.navigateTo({
					url: `/pages/search/search?type=${options.currentTarget.dataset.type || ''}`
				})
			},
			// 工程师
			// toEngineer() {
			// 	console.log('home engineer');

			// 	uni.navigateTo({
			// 		url: `/pages/engineer/list`
			// 	})
			// },
			// 个人中心
			toUser() {
				console.log('home user');

				uni.navigateTo({
					url: `/pages/user/user`
				})
			},

			// toMore(e) {
			// 	console.log(e);

			// 	this.moreShow = true;
			// }
		},
		mounted() {
			// #ifdef H5 || MP-360
			this.navHeight = 50;
			// #endif
		}
	};
</script>

<style lang="scss">
	page {
		width: 100%;
		min-height: 100%;
		overflow-x: hidden;
	}

	/* #ifdef H5 || MP-360 */
	uni-page-body {
		touch-action: none;
	}

	/* #endif */

	.use-search {
		height: 76rpx;
		line-height: 76rpx;
		background-color: #fff;

		text {
			color: #c0c0c0;
		}

		.iconfont {
			font-size: $font-lg + 8upx;
			color: #c0c0c0;
		}
	}

	.more-area {
		position: absolute;
		right: 30rpx;

		.more-item {
			width: 20vw;
			height: 19vw;
		}

		.iconfont {
			line-height: 1;
			font-size: 48rpx;
		}

		text {
			margin-top: 6rpx;
			font-size: 24rpx;
		}
	}

	.badge {
		background: #f46f4d;
	}

	.use-user {
		background: #4d9ff3;
		color: #fff;
		box-shadow: 0px 0px 10px 1px #4d9ff3;
	}

	.im-chat-item {
		background-color: #f5f5f5;
		border-radius: 14rpx;
		padding: 30rpx;
		margin-bottom: 20rpx;
		position: relative;
		overflow: hidden;

		.istop {
			background-color: #4d9ff3;
			border-radius: 100%;
			position: absolute;
			top: -20rpx;
			left: -20rpx;
			width: 60rpx;
			height: 60rpx;

			.iconfont {
				color: #fff;
				font-size: 10px;
				position: absolute;
				right: 12rpx;
				bottom: 6rpx;
			}
		}

		.headimg {
			width: 88rpx;
			height: 88rpx;
			border-radius: 50%;
		}

		text {
			font-size: 24rpx;
			color: #c0c0c0;
		}
	}

	::-webkit-scrollbar {
		width: 0;
		height: 0;
		color: transparent;
		display: none;
	}
</style>
